<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <script src="https://cdn.staticfile.org/vue/3.3.4/vue.global.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-plus/2.3.14/theme-chalk/index.min.css">
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-plus/2.3.14/index.full.min.js"></script>
</head>
<body>
<div id="app">
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </template>

</div>
<script>
  let app = Vue.createApp({
      data: function() {
          return {
              tableData : [
                  {
                      date: '2016-05-03',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                  },
                  {
                      date: '2016-05-02',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                  },
                  {
                      date: '2016-05-04',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                  },
                  {
                      date: '2016-05-01',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                  },
              ],
              value: ''
          }
      },
    });

  app.use(ElementPlus).mount("#app");
</script>
</body>
</html>